<script setup>
import { onMounted, ref } from 'vue';
import { Message, Notification } from "@arco-design/web-vue";
import planApi from "@/api/planApi";
import QrcodeVue from "qrcode.vue";

let LOGIN_INFO = {
    userName: '123',
    password: '123456',
    url: '',
};
const historyParams = history.state.params;
let session = null, query = null;

const deviceList = ref([]);
const plan = ref({ cameraIp: "" });

const queryPlanDetailById = () => {
    planApi.detailById({
        planId: historyParams.planId
    }).then(res => {
        plan.value = res;
        if (plan.value.cameraIp) {
            LOGIN_INFO.url = plan.value.cameraIp;
            init();
        } else {
            Message.warning('该计划未配置视频监控IP地址');
        }
    })
}

const getGroup = (parentID = '', parentKey = '', pageSize = 1000, pageIndex = 1) => {
    if (query) {
        query.getDeviceGroup({
            parentID,
            pageSize,
            pageIndex,
        })
            .then(res => {
                const { code, data } = res;
                if (code === 'success') {
                    console.log(data);
                    if (data && data.length > 0) {
                        data.forEach(element => {
                            if (element['groupID']) {
                                getGroup(element['groupID']);
                                getDeviceList(element['groupID']);
                            }
                            if (element['parentID']) {
                                getDeviceList(element['parentID']);
                            }
                        });
                    }
                } else {
                    alert(res.message);
                }
            });
    } else {
        Message.warning('未获得MtQuery对象');
    }
}

const init = () => {
    getDetectBrowser();

    session = new MtConnector();
    console.log(session);
    session.onDisconnectNotification = data => {
        console.log(data);
    };

    const login = session.connect(LOGIN_INFO);
    login.then(res => {
        console.log(res);
        if (res.code === 'success') {
            /// 调用MtQuery的创建查询对象方法
            query = new MtQuery(session);
            getGroup();
        } else {
            Message.warning('视频服务登录失败，请检查服务器是否开启');
        }
    });
}

const getDeviceList = async (parentID, pageSize = 1000, pageIndex = 1) => {
    query
        .getDevice({
            parentID,
            pageSize,
            pageIndex,
        })
        .then(res => {
            const { code, data } = res;
            if (code === 'success') {
                deviceList.value = [];
                data.forEach(item => {
                    deviceList.value.push(item);
                    // const result = startRecWebRtcVideo("webrtcs://192.168.101.253:443?username=123&password=e10adc3949ba59abbe56e057f20f883e&cameraID=" + item.deviceID, "deviceId", "2024-03-24 18:00:00", "2024-03-24 18:15:00");
                })
            } else {
                alert(res.message);
            }
        });
}

const getDetectBrowser = () => {
    try {
        const detectBrowser = MtConnector.detectBrowser();
        const browser = detectBrowser.browser;
        const version = detectBrowser.version;
        const code = detectBrowser.code;
        const message = detectBrowser.message;
        const isAvailable = code === 'success';
        return isAvailable;
    } catch (e) {
        Message.error((e && e.message) || '不支持当前浏览器');
        return false;
    }
}

onMounted(() => {
    queryPlanDetailById();
})

</script>
<template>
    <div class="main-con">
        <div style="background-color: #fff;padding:16px;">
            <span style="font-size: 18px;font-weight: 600;">所有设备列表</span>
            <a-space style="margin-left: 50px;">
                <a-button type="primary" size="mini" @click="queryPlanDetailById">
                    <template #icon>
                        <icon-sync></icon-sync>
                    </template>
                    连接监控服务</a-button>
                <a-link type="primary" icon :href="plan.cameraIp + '/user/login'" target="_blank">下载证书</a-link>
            </a-space>
        </div>
        <div style="padding: 10px;background-color: #fff;">
            <a-empty v-if="deviceList.length == 0" style="height: 300px;"></a-empty>
            <a-grid v-else :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :colGap="16" :rowGap="16"
                class="grid-demo-grid">
                <a-grid-item class="demo-item" v-for="device in deviceList" :key="device.deviceID">
                    <a-card hoverable>
                        <div id="deviceId" style="height: 200px;text-align: center;">
                            <qrcode-vue :value="device.deviceID" :size="180" level="H" />
                        </div>
                        <div style="margin-top: 10px;text-align: center;">
                            <div>设备号：{{ device.deviceID }}</div>
                            <div>设备名：{{ device.deviceName }}</div>
                        </div>
                    </a-card>
                </a-grid-item>
            </a-grid>
        </div>
    </div>
</template>
